<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>demo</title>
	<meta name="keywords" content=""/>
	<meta name="description" content=""/>
	<meta name="viewport" content="width=device-width"/>
	<style>
		body{margin:0;padding:0;color:#fff;}
		h1{margin:0;}
		.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;overflow:hidden;}
		.clearfix{zoom:1;}
		.head{height:60px;text-align:center;background:rgba(177,38,298,1);}
		.foot{height:100px;text-align:center;background:rgba(38,218,177,1);}
		.main{margin:0 auto;width:1000px;}
		.left{float:left;width:800px;height:1000px;background:rgba(198,187,138,1);}
		.right{float:left;width:200px;height:1000px;background:rgba(98,87,238,.7);}

		#ad{position:fixed;z-index:0;top:0;bottom:0;right:0;left:0;background:rgba(0,0,0,.2);}
		.container{position:absolute;top:50%;left:50%;margin-top:-250px;margin-left:-375px;width:750px;height:500px;}
		.container img{height:100%;width:750px;}
		#adRight{display:none;position:fixed;z-index:1;right:0;top:50%;margin-top:-50px;width:40px;height:100px;color:#333;font-size:12px;text-align:center;}
		#adRight img{width:100%;}
	</style>
</head>
<body>
	<div class="head"><h1>头部</h1></div>
	<div class="main clearfix">
		<div class="left"><h1>左栏内容</h1></div>
		<div class="right"><h1>右栏内容</h1></div>
	</div>
	<div class="foot"><h1>底部</h1></div>
	<div id="ad">
		<div class="container">
			<img src="img/1499828200677922.png" alt="advertisement">
		</div>
	</div>
	<div id="adRight">
		<img src="img/1499828200677922.png" alt="advertisement">
		<span>重播</span>
	</div>
	<script>
		window.onload = function(){
			function AnimateAd(){
				var ad = document.getElementById('ad');
				var adRight = document.getElementById('adRight');
				ad.style.display = 'none';
				adRight.style.display = 'block';
			}
			setTimeout(AnimateAd,3000);
			(function () {
				var replayAd = document.getElementById('adRight').getElementsByTagName('span')[0];
				replayAd.onclick = function(){
					var ad = document.getElementById('ad');
					ad.style.display = 'block';
					function AnimateAdClose(){
						var ad = document.getElementById('ad');
						ad.style.display = 'none';
					}
					setTimeout(AnimateAd,3000);
				}	
			}());
		};
		
	</script>
</body>
</html>